```html title="index.html" del=/( p-6.*?)"/ ins="~p-6/10" del=" text-lg md:text-xl lg:text-2xl" ins=/~text-lg\/2xl/ ins="~mt-4/6" del=" mt-4 md:mt-5 lg:mt-6" ins="~mt-1/2.5" del=" mt-1 lg:mt-2.5"
<main class="~p-6/10 p-6 md:p-8 lg:p-10">
  <div class="grid grid-cols-2 gap-4">
    <img src="/beach-house.jpg" alt="" class="w-full h-52 object-cover rounded-lg" />
    <img src="/beach-house-interior-1.jpg" alt="" class="w-full h-52 object-cover rounded-lg" />
  </div>
  <div class="~mt-4/6 mt-4 md:mt-5 lg:mt-6 flex gap-4 items-center">
    <div class="flex-1">
      <span class="text-sm font-medium text-slate-500 dark:text-slate-400">Entire house</span>
      <p class="~text-lg/2xl text-lg md:text-xl lg:text-2xl block font-semibold text-slate-900 dark:text-white">Beach House in Collingwood</p>
    </div>
    <button type="button" class="bg-slate-900 flex gap-1 items-center dark:bg-white text-white dark:text-slate-900 text-sm leading-6 font-medium p-2 lg:px-3 rounded-lg">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
        <path stroke-linecap="round" stroke-linejoin="round" vector-effect="non-scaling-stroke" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" />
      </svg>
      Save
    </button>
  </div>
  <dl class="text-xs font-medium flex items-center">
    <dt class="sr-only">Reviews</dt>
    <dd class="flex items-center">
      <svg width="24" height="24" fill="none" aria-hidden="true" class="mr-1 stroke-current">
        <path d="m12 5 2 5h5l-4 4 2.103 5L12 16l-5.103 3L9 14l-4-4h5l2-5Z"  stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
      </svg>
      <span>4.89 <span class="text-slate-400 font-normal">(128)</span></span>
    </dd>
    <dt class="sr-only">Location</dt>
    <dd class="flex items-center">
      <svg width="2" height="2" aria-hidden="true" fill="currentColor" class="mx-3 text-slate-300">
        <circle cx="1" cy="1" r="1" />
      </svg>
      <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-1 text-slate-400 dark:text-slate-500" aria-hidden="true">
        <path d="M18 11.034C18 14.897 12 19 12 19s-6-4.103-6-7.966C6 7.655 8.819 5 12 5s6 2.655 6 6.034Z" />
        <path d="M14 11a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z" />
      </svg>
      Collingwood, Ontario
    </dd>
  </dl>
  <p class="mt-4 text-sm leading-6 dark:text-slate-400">
    Nestled just steps away from the pristine sands of Coronado Beach, our luxurious beach house offers an unparalleled coastal living experience. With its modern design and ocean-inspired decor, Seaside Serenity provides the perfect blend of comfort and elegance for families, couples, and friends seeking a relaxing retreat.
  </p>
</main>

```